(function(factory) {
	var wmTabsObj = function() {
		this.wmTab = $.extend({}, factory)
	}
	$.fn.wmTabs = function(options) {
		var _instantiate = new wmTabsObj()
		_instantiate.wmTab.setting = options = $.extend({
			onRemoveTab: function(obj, removeFunction) {
				removeFunction()
			},
			addApi: "",
			idKey: "id",
			textKey: "text",
			removeApi: "",
			content: null,
		}, options)
		_instantiate.wmTab.$container = $(this);
		_instantiate.wmTab.init();
		return _instantiate.wmTab;
	}
})({
	init: function() {
		var that = this;
		this.$tabs = $("<div>", {
			"class": "wm-tabs"
		}).appendTo(this.$container)
		this.$ul = $('<ul class="nav nav-tabs wm-tabs-all"></ul').appendTo(this.$tabs);
		this.$content = that.setting.content ? that.setting.content.addClass("tab-content wm-tabs-content") : $('<div class="tab-content wm-tabs-content"></div>').appendTo(this.$container);
		this.$addBtn = $('<li><a href="javascript:void(0);"><span class="wm-tabs-add">+</span></a></li>').appendTo(this.$ul).on('click', function() {
			that.newTab();
		});
		this.addTab()
		this.showTab(0)
	},
	addTab: function() {
		var that = this;
		$.each(this.setting.list, function(index, obj) {
			var $li = $('<li>').html('<a href="#tab' + obj[that.setting.idKey] + '" data-toggle="tab"><span class="tab-title">' + obj[that.setting.textKey] + '</span></a>');
			var $childDiv = $('<div class="tab-pane fade" id="tab' + obj[that.setting.idKey] + '">' + obj[that.setting.textKey] + '</div>').appendTo(that.$content);
			if (obj.close) {
				$li.find("a").append('<span class="wm-tabs-close">&times;</span>')
			}
			that.$addBtn.before($li);
			$li.find('.wm-tabs-close').on('click', function(e) {
				if (that.setting.removeApi) {
					that.removeTab(obj, function() {
						$li.remove();
						$childDiv.remove();
						that.$ul.find('li').eq(0).find('a').tab('show');
					})
				} else if (that.setting.onRemoveTab && $.isFunction(that.setting.onRemoveTab)) {
					that.setting.onRemoveTab(obj, function() {
						$li.remove();
						$childDiv.remove();
						that.$ul.find('li').eq(0).find('a').tab('show');
					})
				}
				e.stopPropagation()
				return false
			})
		});
	},
	removeTab: function(obj, callback) {
		var that = this;
		var queryData = {};
		queryData[that.setting.idKey] = obj[that.setting.idKey]
		$.ajax({
			url: that.setting.removeApi,
			data: queryData,
			suc: function(data) {
				callback(data)
			},
			hasAlert: true,
			loadingContainer: $("body")
		});
	},
	newTab: function(callback) {
		var that = this;
		var $li = $('<li>');
		var $input = $('<input type="text" value=""  />');
		var $childDiv = $('<div class="tab-pane fade"></div>');
		$li.html('<a href="" data-toggle="tab"><span class="tab-title"></span><span class="wm-tabs-close">&times;</span></a>');
		that.$addBtn.before($li);
		that.$content.append($childDiv);
		$li.find('.tab-title').append($input);
		$input.on('keyup', function(e) {
			if (e.which == 13) {
				that.removeInput($input, function(id) {
					$li.find(".tab-title").html($input.val())
					$input.remove()
					$childDiv.attr("id", "tab" + id)
					$li.find("a").attr("href", "#tab" + id)
					$li.removeClass("active")
					$li.find("a").tab("show");
					obj = {};
					obj[that.setting.idKey] = id;
					obj[that.setting.textKey] = $input.val();

					$li.find('.wm-tabs-close').off("click").on('click', function(e) {
						that.removeTab(obj, function() {
							$li.remove();
							$childDiv.remove();
							that.$ul.find('li').eq(0).find('a').tab('show');
						})
					})

				})
			}

		}).focus();

		$li.find('.wm-tabs-close').on('click', function() {
			$li.remove();
			$childDiv.remove();
			that.$ul.find('li').eq(0).find('a').tab('show');
		})

	},
	showTab: function(index) {
		this.$ul.find('li').eq(index).find('a').tab('show');
	},
	removeInput: function($input, callback) {
		var that = this;
		var queryData = {}
		queryData[that.setting.idKey] = $input.val()
		$.ajax({
			url: that.setting.addApi,
			data: queryData,
			suc: function(data) {
				callback(data[that.setting.idKey])
			},
			hasAlert: true,
			loadingContainer: $("body")
		});
	}
})


